<template>
    <div style="width: 700px;margin-left: 20px;margin-top: -10px;">
        <el-card :body-style="{ padding: '5px' }" style="width: 800px;margin-top: 20px;">
            <div style="padding: 14px">
                <span>{{ post.postContent }}</span> <!-- 假设每个对象有一个title属性 -->
            </div>
            
            <div style="margin-left: 20px;">
                <img :src="post.user?.avatar" style="width:40px;height: 40px;border-radius: 50% 50%;" />
                <span style="margin-left: 20px;">作者：
                    {{ post.user?.nickname }}</span>
            </div>
        </el-card>

        <el-card :body-style="{ padding: '5px' }" style="width: 800px;margin-top: 5px;">
            <div style="padding: 14px;border-bottom: 1px solid gainsboro;">
                <span>评论：</span> <!-- 假设每个对象有一个title属性 -->
            </div>
            <div style="margin-top: 20px;height: 60px;width: 700px;">

                <el-avatar :size="40" :src="userInfo.avatar" />

                <el-input v-model="textarea" :rows="2" type="textarea" placeholder="输入评论..."
                    style="margin-left: 60px;margin-top: -40px;" />
                <el-button type="primary" style="float: right;margin-top: 10px;margin-bottom: 10px;"
                    @click="saveComment()">发表评论</el-button>
            </div>
        </el-card>
        <el-card :body-style="{ padding: '5px' }" style="width: 800px;margin-top: 5px;">

            <div v-for="(item, i) in post.comments" :key="i" style="margin-top: 20px;border-bottom: 1px solid gainsboro;">
                <!-- 评论人头像、评论时间、昵称 -->
                <div style="margin-bottom: 10px;">
                    <el-avatar class="header-img" :size="40" :src="item.user.avatar"
                        style="float: left;margin-right: 10px;"></el-avatar>
                    <div>
                        <p style="color: rgb(135, 166, 222);">{{ item.user.nickname }}<span
                                style="color: rgb(199, 48, 48);margin-left: 20px;" @click="replybutton(item)">回复
                            </span></p>
                        <p class="author-time">{{ moment(item.createTime).format('YYYY-MM-DD hh:mm:ss') }}</p>
                    </div>
                </div>

                <!-- 评论内容 -->
                <div style="margin-left: 60px;margin-bottom: 10px;">
                    <p>
                        <span class="reply">{{ item.commentContent }}</span>
                    </p>
                </div>

                <!-- 回复 -->
                <div class="reply-box"
                    style="background-color: rgb(225, 226, 228);border-radius: 10px;margin-left: 40px;margin-bottom: 10px;">
                    <div v-for="(reply, j) in item.replies" :key="j" style="padding-top: 10px;padding-left: 10px;">

                        <!-- 回复人的头像和昵称、回复时间 -->
                        <div style="margin-bottom: 10px;">
                            <el-avatar class="header-img" :size="30" :src="reply.user.avatar"
                                style="float: left;margin-right: 10px;"></el-avatar>
                            <div>
                                <p style="color: rgb(135, 166, 222);">{{ reply.user.nickname }}</p>
                                <p class="author-time">{{ moment(reply.createTime).format('YYYY-MM-DD hh:mm:ss') }}</p>
                            </div>
                        </div>

                        <!-- 回复的用户，以及内容 -->
                        <div style="margin-left: 40px;">
                            <p>
                                <span style="font-weight: bold;">回复 </span><span style="color: cornflowerblue;">{{
                                    item.user.nickname }}:</span>
                                <span style="margin-left:10px;">{{ reply.replyContent }}</span>
                            </p>
                        </div>

                    </div>


                </div>



            </div>


        </el-card>
        <!-- 评论抽屉 -->
        <el-drawer v-model="drawer" title="回复评论" :with-header="false">
            <div style="padding: 14px;border-bottom: 1px solid gainsboro;">
                <span>回复：{{ comment.user?.nickname }}</span> <!-- 假设每个对象有一个title属性 -->
            </div>
            <div style="margin-top: 20px;height: 60px;width: 300px;">

                <el-avatar :size="40" :src="post.user.avatar" />

                <el-input type="text" placeholder="输入评论..." style="margin-left: 60px;margin-top: -40px;"
                    v-model="replyInput" />
                <el-button style="float: right;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;"
                    @click="clear">重置</el-button>
                <el-button type="primary" style="float: right;margin-top: 10px;margin-bottom: 10px;"
                    @click="replycomment">回复评论</el-button>

            </div>
        </el-drawer>

    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import axios from '../../api/index';
import { da, el } from 'element-plus/es/locale';
import { ElMessage } from "element-plus";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import moment from "moment";
const router = useRouter();
const route = useRoute();
getPost();

// 从localStorage中获取存储的JSON字符串  
const userInfoJsonString = localStorage.getItem('userInfo')!;

// 解析JSON字符串为JavaScript对象  
const userInfo = JSON.parse(userInfoJsonString);
// import axios from 'axios' // 引入axios库进行HTTP请求  

const textarea = ref('')
//回复评论
const replyInput = ref('')

const post = ref({} as any)

const dialogVisible = ref(false)

const comment = ref({})




//获取数据
function getPost() {

    axios.get('/post/findPost?postId=' + route.params.postId)
        .then((resp: any) => {

            if (resp.code == 200) {

                
                post.value = resp.data



            } else {
                ElMessage.error('服务器请求错误~~')
            }
        })
}


//添加贴子的评论(发表评论)
function saveComment() {
    if (textarea.value == '') {
        ElMessage.error('输入不能为空！')
    } else {

        if (textarea.value.length > 500) {
            ElMessage.error('评论不能超过500字！')
        } else {
            axios({
                method: 'POST',
                url: '/comment/saveComment',
                data: JSON.stringify({
                    postId: route.params.postId,
                    userId: userInfo.id,
                    commentContent: textarea.value
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then((resp) => {
                if (resp.code == 200) {
                    textarea.value = '';
                    ElMessage.success(resp.msg);
                    getPost();
                } else {
                    ElMessage.error('发布评论失败！')
                }
            })
        }

    }



}



//===========回复评论
const drawer = ref(false)



//回复按钮
function replybutton(item: any) {
    drawer.value = true

    comment.value = item;
    dialogVisible.value = true
}

//重置按钮
function clear() {

    replyInput.value = '';
    dialogVisible.value = true
    replyInput.value = ''
}

//回复评论按钮
function replycomment() {

    if (replyInput.value == '') {
        ElMessage.error('输入不能为空！')
    } else {
        if (replyInput.value.length > 200) {
            ElMessage.error('评论不能超过200字！')
        } else {
            axios({
                method: 'POST',
                url: '/reply/saveReply',
                data: JSON.stringify({
                    userId: userInfo.id,
                    commentId: comment.value.commentId,
                    replyContent: replyInput.value
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then((resp) => {
                if (resp.code == 200) {
                    ElMessage.success('评论成功！')
                    getPost();
                    drawer.value = false
                } else {
                    ElMessage.error("发布失败！")
                }
            })
        }
    }


}

//=====================









</script>